<script setup lang="ts">
import { getOptListAPI, type ArticleRowItem } from '@/apis/article'
import ArticleItem from '@/components/ArticleItem.vue'
import { ref } from 'vue'

// 点赞列表数据
const list = ref<ArticleRowItem[]>([])
// 当前页码
const current = ref(1)
// 是否正在加载
const isLoading = ref(false)
// 是否加载完成
const isFinished = ref(false)

/**
 * 获取点赞列表数据
 */
const getLikeList = async () => {
  // 调用API获取点赞列表，optType=1表示点赞
  isLoading.value = true
  const res = await getOptListAPI({
    optType: 1,
    page: current.value,
    pageSize: 5,
  })
  // 处理分页逻辑
  if (current.value === 1) {
    // 第一页数据直接替换
    list.value = res.data.rows
  } else {
    // 后续页面数据追加
    list.value.push(...res.data.rows)
  } // 更新加载状态 - 只有在请求成功时才增加页码
  isLoading.value = false
  current.value++
  if (current.value > res.data.pageTotal) {
    isFinished.value = true
  }
}
getLikeList()
</script>

<template>
  <div class="like-view">
    <!-- 顶部导航栏 -->
    <nav class="my-nav van-hairline--bottom">
      <h1 class="logo-text">我的喜欢</h1>
    </nav>

    <!-- 点赞列表 -->
    <van-list
      v-model:loading="isLoading"
      :finished="isFinished"
      finished-text="没有更多了"
      class="article-list"
      @load="getLikeList"
      :immediate-check="false"
      offset="100"
    >
      <!-- 文章列表项 -->
      <ArticleItem v-for="item in list" :key="item.id" :article="item" />
    </van-list>
    <van-back-top right="15vw" bottom="10vh" />
  </div>
</template>

<style lang="scss" scoped>
.like-view {
  margin-bottom: 50px;
  margin-top: 44px;
  .my-nav {
    height: 44px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    .logo-text {
      font-size: 18px;
      font-weight: bold;
      color: #222;
      line-height: 44px;
      margin: 0;
    }
  }
}
</style>
